<template>
  <el-menu
    default-active="/"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="rgb(3, 21, 39)"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
  >
    <template v-for="item in filterMenus">
      <el-submenu v-if="item.children" :key="item.id" :index="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <template v-for="element in item.children">
          <el-menu-item
            :index="element.path"
            v-if="!element.children"
            :key="element.id"
            @click="add()"
            >{{ element.title }}
          </el-menu-item>
          <template v-else>
            <el-submenu :index="element.path" :key="element.id">
              <template slot="title">
                {{ element.title }}
              </template>
              <el-menu-item
                v-for="i in element.children"
                :key="i.id"
                :index="i.path"
                @click="add()"
                >{{ i.title }}</el-menu-item
              >
            </el-submenu>
          </template>
        </template>
      </el-submenu>
      <el-menu-item
        :index="item.path"
        v-else
        :key="item.id"
        @click="add()"
      >
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>

export default {
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    add() {
      this.$store.commit('navCreat',this.$route)
      
    },
  },
  data() {
    return {
      menus: [
        {
          id: 1,
          title: "首页",
          path: "/home/",
          icon: "el-icon-office-building",
          auth: ["超级管理员", "经销商"],
        },
        {
          id: 2,
          title: "用户",
          path: "/home/user",
          icon: "el-icon-office-building",
          children: [
            {
              id: 21,
              title: "用户管理",
              path: "/home/user",
              icon: "el-icon-office-building",
              auth: ["超级管理员", "经销商"],
            },
            {
              id: 22,
              title: "用户分组",
              path: "",
              icon: "el-icon-office-building",
              auth: ["超级管理员"],
            },
            {
              id: 23,
              title: "用户标签",
              path: "",
              icon: "el-icon-office-building",
              auth: ["超级管理员", "经销商"],
            },
            {
              id: 24,
              title: "用户等级",
              path: "",
              icon: "el-icon-office-building",
              auth: ["超级管理员"],
            },
          ],
        },

        {
          id: 4,
          title: "菜单管理",
          path: "/home/menu",
          icon: "el-icon-office-building",
          children: [
            {
              id: 41,
              title: "所有菜单",
              path: "/home/menu",
              icon: "el-icon-office-building",
              auth: [ "经销商"],
            },
            {
              id: 42,
              title: "添加菜单",
              path: "/home/menu",
              icon: "el-icon-office-building",
              auth: ["超级管理员"],
            },
          ],
        },
        {
          id: 5,
          title: "订单管理",
          path: "/order/",
          icon: "el-icon-shopping-cart-full",
          children: [
            {
              id: 51,
              title: "订单管理",
              path: "/home/order",
              auth: ["超级管理员", "经销商"],
            },
            {
              id: 52,
              title: "收银订单",
              path: "/home/cashier",
              auth: [ "经销商"],
            },
            {
              id: 53,
              title: "售后订单",
              path: "/home/sale",
              auth: ["超级管理员"],
            },
          ],
        },
        {
          id: 6,
          title: "设置",
          path: "/set/",
          icon: "el-icon-shopping-cart-full",
          children: [
            {
              id: 61,
              title: "系统设置",
              path: "",
              auth: ["超级管理员", "经销商"],
            },
            { id: 62, title: "消息设置", path: "", auth: ["超级管理员"] },
            {
              id: 63,
              title: "管理权限",
              path: "",
              children: [
                {
                  id: 63 - 1,
                  title: "角色管理",
                  path: "/home/role",
                  auth: ["超级管理员", "经销商"],
                },
                {
                  id: 63 - 2,
                  title: "管理员列表",
                  path: "/home/administrator",
                  auth: ["超级管理员", "经销商"],
                },
                {
                  id: 63 - 3,
                  title: "权限规则",
                  path: "",
                  auth: ["经销商"],
                },
              ],
            },
            {
              id: 64,
              title: "发货设置",
              path: "",
              auth: ["超级管理员", "经销商"],
            },
          ],
        },
      ],
      title: null,
    };
  },
  computed: {
    filterMenus() {
      //获取本地存储，当前登录用户角色
      const res = localStorage.getItem("userInfo") || "{}";
      const userInfo = JSON.parse(res);
      console.log(userInfo);
      let arr = [];
      this.menus.forEach((item) => {
        if (item.children) {
          let list = { ...item, children: [] };
          item.children.forEach((element) => {
            if (element.children) {
              let menu = { ...element, children: [] };
              element.children.forEach((ele) => {
                let falg = ele.auth.find((box) => userInfo.roles.find((fox) => box == fox.roleName));
                if (falg) {
                  menu.children.push(ele);
                }
              });
              if (menu.children.length) {
                list.children.push(menu);
              }
            } else {
              let falg = element.auth.find((ele) =>
                userInfo.roles.find((box) => ele == box.roleName)
              );
              if (falg) {
                list.children.push(element);
              }
            }
          });
          if (list.children.length) {
            arr.push(list);
          }
        } else {
          let falg = item.auth.find((ele) =>
            userInfo.roles.find((element) => ele == element.roleName)
          );
          if (falg) {
            arr.push(item);
          }
        }
      });
      console.log(arr);
      return arr;
    },
  },
};
</script>

<style lang='scss' scoped>
li:hover {
  background-color: red !important;
}
li div:hover {
  background-color: red !important;
}
</style>